<html>
<head>
<title>创建公告</title> 
	{{>/WEB-INF/pages/common/meta_base.part.html}}
	{{>/WEB-INF/pages/common/refs_base.part.html}}
	{{>/WEB-INF/pages/common/refs_modal.part.html}}
	<script src="{{ctx}}/static/jquery-blockui/jquery.blockUI.js" type="text/javascript"></script>
<script>
	$(document).ready(function() {
		//聚焦第一个输入框
		$("#cmt_type").focus();
		//为inputForm注册validate函数
		$("#inputForm").validate({
			rules:{
				'title':{
					required:true,
					maxlength:50
				},
				'content':{
					maxlength:256
				}
			}
		});
		//处理应用选项变更事件：获取相应应用的角色列表
		$("#apps").on("change", function(evt){
			 var selected=$(this).children('option:selected');
			 $("#appName").val(selected.text().trim());
			 var id=selected.val();
			 $("#roles").block({ message: 'Loading...' });
			 $.getJSON('{{ctx}}/notice/roles/'+id,function(obj){
				 $("#roles").unblock();
				 if(!obj.result){
					 alert(obj.message);
					 return;
				 }
				 var roleBoxs=[], 
				 	 roles=obj.roles, 
				 	 len=roles ? roles.length : 0, 
				 	 role;
				 if(len<=0){
					 $("#roles").empty();
					 $("#roles").append('<div style="height:40px">该应用暂无角色</div>');
					 return;
				 }
				 for(var i=0; i<len; i++){
					 role=roles[i];
					 roleBoxs.push(['<label class="checkbox">',
					                '<input type="checkbox" class="roles" value="',role,'" name="roles" disabled/>',
					                '<span class="label label-success">',role,'</span>',
					                '</label>&nbsp;'
					                ].join(''));
				 }
				 var htmls=['<label>',
							'<input class="choice" type="radio" name="roleType" value="1" checked />全部角色',
							'</label>',
							'<label>', 
							'<input class="choice" type="radio" name="roleType" value="0"/>部分角色',
							'</label>',
							'<div class="form-inline">',roleBoxs.join(''),'</div>',
							'<div class="btn-group">',
							'<input type="button" class="roles btn" value="全选" disabled/>',
							'<input type="button" class="roles btn" value="反选" disabled/>',
							'</div>'
							];
				 $("#roles").empty();
				 $("#roles").append(htmls.join(''));
				 $("input[name='roleType']").bind("click", roleTypeRadioClickHandle);
				 $("input[type='button'][class='roles btn']").bind("click", roleSelectBtnClickHandle);
			 });
		});
		$("input[name='roleType']").bind("click", roleTypeRadioClickHandle);
		$("input[type='button'][class='roles btn']").bind("click", roleSelectBtnClickHandle);
	});
	
	function roleTypeRadioClickHandle(ctrl){
		var checkBoxes=$("input[type='checkbox'][class='roles']");
		var btns=$("input[type='button'][class='roles btn']");
		if($(ctrl.target).val()=='0'){
			checkBoxes.attr('disabled', false);
			btns.attr('disabled', false);
		}
		else{
			checkBoxes.attr('disabled', true);
			btns.attr('disabled', true);
		}
	}
	function roleSelectBtnClickHandle(evt){
		var btn=$(evt.target),
			selectAll=btn[0].value=='全选',
			checkBoxes=$("input[type='checkbox'][class='roles']");
		if(selectAll){
			checkBoxes.prop('checked',true);
		}
		else{
			checkBoxes.each(function(){
				$(this).prop("checked", !this.checked);
			});
		}
	}
</script>
</head>
<body>
	{{>/WEB-INF/pages/common/layout_header.part.html}}
	{{#errorMessage}}
		<script type="text/javascript">
			bootbox.alert('<h4>{{errorMessage}}</h4>');
		</script>
	{{/errorMessage}}
	<div class="container">
		<ul class="breadcrumb">
		  <li><a href="{{ctx}}">首页</a></li>
		  <li><a href="{{ctx}}/system/cloud">云服务</a></li>
		  <li><a href="{{ctx}}/notice?appId={{appId}}">公告</a></li>
		  <li class="active">创建公告</li>
		</ul>
		<hr class="hr1">
		<div class="hr-10"></div>
		<div class="hr-10"></div>
		<div class="hr-10"></div>
		<form id="inputForm" action="{{ctx}}/notice/create" method="post" class="form-horizontal">
			<div class="form-group">
				{{#hasApps}}
				<label for="appId" class="col-sm-2 control-label">选择应用:</label>
				<div class="col-sm-10">
					<select id="apps" name="appId" class="form-control">
						{{#apps}}
						<option value="{{id}}">
							{{app_name}}
						</option>
						{{/apps}}
					</select>
				</div>
				{{/hasApps}}
				{{^hasApps}}
				<label for="appId" class="col-sm-2 control-label">应用:</label>
				<div class="col-sm-10">
					<p class="form-control-static"><label class="label label-danger">{{appName}}</label></p>
				</div>
				<input type="hidden" id="appId" name="appId" value="{{appId}}"/>
				{{/hasApps}}
				<input type="hidden" id="appName" name="appName" value="{{appName}}"/>
			</div>
			<div class="form-group">
				<label for="appName" class="col-sm-2 control-label">选择角色:</label>
				<div class="col-sm-10" id="roles">
				{{#hasRoles}}
					<label> 
						<input class="choice" type="radio" name="roleType" value="1" checked />全部角色
					</label>
					<label> 
						<input class="choice" type="radio" name="roleType" value="0"/>部分角色
					</label>
					<div class="form-inline">
					{{#roles}}
						<label class="checkbox">
							<input type="checkbox" class="roles" value="{{.}}" name="roles" disabled/>
							<span class="label label-success">{{.}}</span>
						</label>
					{{/roles}}
					</div>
					<div class="btn-group">
					<input type="button" class="roles btn" value="全选" disabled/>
					<input type="button" class="roles btn" value="反选" disabled/>
					</div>
				{{/hasRoles}}
				{{^hasRoles}}
				<p class="form-control-static">该应用暂无角色</p>
				{{/hasRoles}}
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">终端消息处理:</label>
				<div class="col-sm-10">
					<label class="checkbox">
						<input type="checkbox" name="moduleBadge" checked/>
						<span>在模块图标上显示消息条数</span>
					</label>
				</div>
			</div>
			<div class="form-group">
				<label for="title" class="col-sm-2 control-label">标题:</label>
				<div class="col-sm-5">
					<input type="text" id="title" name="title" class="form-control required" placeholder="最多输入50个字符" value="{{notice.title}}" />
				</div>
			</div>
			<div class="form-group">
				<label for="cmt_content" class="col-sm-2 control-label">内容:</label>
				<div class="col-sm-5">
					<textarea id="cmt_content" name="content" class="form-control required" rows="6" placeholder="最多输入256个字符">{{notice.content}}</textarea>
				</div>
			</div>
			<hr>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
				<input id="submit_btn" class="btn btn-primary" type="submit" value="提交" />
				&nbsp;
				<a id="cancel_btn" class="btn btn-default" href="{{ctx}}/notice?appId={{appId}}">返回</a>
				</div>
			</div>
		</form>
		{{>/WEB-INF/pages/common/layout_footer.part.html}}
	</div>
</body>
</html>
